<template>
	<view class="imgGroup">
		<image @tap="preview=true" :src="item" mode="aspectFill" class="thumbImg" :class="myClass" v-for="( item , index) in list" :key="index"></image>
		
		<view class="preview" v-if="preview">
			<swiper :indicator-dots="true" :current="current" :autoplay="false"  :duration="300" indicator-active-color="#fff">
				<swiper-item v-for="( item , index) in list" :key="index">
					<image @tap="preview=false" :src="item" mode="aspectFit" class="previewImg"></image>
				</swiper-item>
			</swiper>
			<view class="oper" v-if="list.length > 1">
				<view class="left layui-icon layui-icon-left" @tap="switchNext(-1)"></view>
				<view class="right layui-icon layui-icon-right" @tap="switchNext(1)"></view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		name: "thumbImg",
		props: {
			size: {
				type: String ,
				default: ""
			},
			src : {
				type: String ,
				default: ""
			},
			isRound : {
				type : Boolean ,
				default : false 
			}
		},
		
		created() {
			
		},
		
		computed:{
			myClass : function(e){
				var classList = [] ;
				classList.push(this.size);
				if (this.isRound) {
					classList.push("round");
				}
				return classList.join(" ");
			},
			
			list : function(res){
				if(!this.src){
					return [] ;
				}
				return this.src.split(",");
			},
		},
		
		data() {
			return {
				preview : false ,
				current : 0
			};
		},
		
		methods:{
			
			switchNext:function(index){
				var nextIndex = this.current + index ;
				if(nextIndex > -1 && nextIndex < this.list.length ){
					this.current = nextIndex ;
				}
			},
			
			
		}
	}
</script>

<style lang="less" scoped>
	.imgGroup{
		display: block;
		width: 100%;
		word-break: break-all;
		white-space: normal;
	}
.thumbImg{
	width: 30px;
	height: 30px;
	vertical-align: middle;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	display: inline-block;
	margin: 0 3px 6px;
	&.round{
		-webkit-border-radius: 100%;
		-moz-border-radius: 100%;
		border-radius: 100%;
	}
	&.md{
		width: 50px;
		height: 50px;
	}
	&.lg{
		width: 100px;
		height: 100px;
	}
}

.preview{
	z-index: 9999;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #000;
	swiper,swiper-item,.previewImg{
		width: 100%;
		height: 100%;
	}
	.oper{
		position: absolute;
		top: 50%;
		left: 30px;
		right: 30px;
		color: #fff;
		font-weight: bold;
		.layui-icon{
			width: 45px;
			height: 45px;
			-webkit-border-radius: 100%;
			-moz-border-radius: 100%;
			border-radius: 100%;
			text-align: center;
			line-height: 45px;
			font-size: 20px;
			float: left;
			background-color: #131313;
			cursor: pointer;
			transition: 0.4s;
			&:hover{
				opacity: 0.7;
			}
		}
		.right{
			float: right;
		}
	}
}

</style>
